<template>
  <el-dialog v-model="addOrEditOrgVisible" :title="isAdd ? '创建组织机构' : '编辑组织机构'" width="600">
    <el-form ref="formRef" style="max-width: 600px" :model="formCustom" status-icon :rules="rules" label-width="auto">
      <el-form-item label="节点" prop="name">
        <el-input v-model="formCustom.name" type="text" autocomplete="off" placeholder="请输入节点名称" />
      </el-form-item>
      <el-form-item label="负责人" prop="leader">
        <el-select ref="role" v-model="formCustom.leader" show-search placeholder="请选择" filterable clearable>
          <el-option
            v-for="item of userList"
            :value="JSON.stringify(item)"
            :key="item.id"
            :label="item.name"
            :disabled="item.id === 1"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addOrEditOrgVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddOrEditOrg">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { getUserList, treeCreate, treeModify } from "@/api/modules/userManagement";
const formRef = ref<FormInstance>();
// 组织
let organizationItem = { id: 0 };
let level: string = "1";
let isAdd: boolean = true;
const addOrEditOrgVisible = ref<boolean>(false);

let formCustom = ref<any>({
  name: "",
  leader: null,
  parent_id: 0
});
const rules = reactive<FormRules<typeof formCustom>>({
  name: [
    { required: true, message: "内容不能为空", trigger: "blur" },
    { min: 0, max: 64, message: "长度需为0~64个字符", trigger: "blur" }
  ]
});
// 获取用户列表
let userList = ref<any>([]);
const getUserCollect = async () => {
  const params = {
    page: 1,
    page_size: 1000000,
    org_id: organizationItem.id,
    simple: 1
  };
  const { data } = await getUserList(params);
  console.log(data);
  userList.value = data;
};

let loading = false;
const openDialog = (orgItem: any = {}, isAddDal: boolean = true, itemLevel) => {
  organizationItem = orgItem;
  level = itemLevel;
  isAdd = isAddDal;
  loading = false;
  addOrEditOrgVisible.value = true;
  getUserCollect();
  if (isAdd) {
    formCustom.value = {
      name: "",
      parent_id: orgItem["parent_id"],
      leader: null
    };
    if (level === "2") {
      // 新增下级
      formCustom.value.parent_id = orgItem.id;
    }
  } else {
    formCustom.value = {
      name: orgItem.name,
      parent_id: orgItem["parent_id"],
      leader: orgItem.leader ? JSON.stringify(orgItem.leader) : null
    };
  }
};
const closeDialog = () => {
  loading = false;
  addOrEditOrgVisible.value = false;
};
// emit
const emit = defineEmits<{
  refresh: [];
}>();

const submit = async (formEl: FormInstance | undefined) => {
  loading = true;
  const paramsObj = { ...formCustom.value };
  paramsObj.leader = paramsObj.leader ? JSON.parse(paramsObj.leader) : null;
  if (isAdd) {
    // 创建
    const { data } = await treeCreate(paramsObj);
    if (data) {
      ElMessage({
        type: "success",
        message: `创建成功!`
      });
      addOrEditOrgVisible.value = false;
      // 重置表单
      formCustom.value = {
        name: "",
        leader: ""
      };
      emit("refresh");
    }
  } else {
    // 编辑
    const { data } = await treeModify(organizationItem.id, paramsObj);
    if (data) {
      ElMessage({
        type: "success",
        message: `编辑成功!`
      });
      addOrEditOrgVisible.value = false;
      // 重置表单
      formEl?.resetFields();
      emit("refresh");
    }
  }
};
defineExpose({
  openDialog,
  closeDialog
});
</script>
<style lang="scss" scoped>
.filter {
  width: 100%;
  height: 500px;
  overflow-y: auto;
  border: none;
  box-shadow: none;
}
</style>
